<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>


        <div class="aprd-search-container">
          <el-form :inline="true" :model="headerSearchForm" class="aprd-search-form">
            <el-form :model="headerSearchForm" label-width="auto" class="aprd-search-form">
              <el-form-item label="卷号">
                <el-input v-model="headerSearchForm.volumeNum" placeholder="请输入" style="width:100px" size="small" />
              </el-form-item>
              <el-form-item label="钢种">
                <el-input v-model="headerSearchForm.steelGrade" placeholder="请输入" style="width:100px" size="small" />
              </el-form-item>
              <el-form-item label="宽度分档范围">
                <el-select v-model="headerSearchForm.inletWidth" placeholder="请选择" style="width:100px" size="small">
                  <el-option label="全部" value="" />
                  <el-option v-for="item in widthRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="厚度分档范围">
                <el-select v-model="headerSearchForm.entryThickness" placeholder="请选择" style="width:100px" size="small">
                  <el-option label="全部" value="" />
                  <el-option v-for="item in thicknessRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker v-model="headerSearchForm.startDate" type="datetime" placeholder="选择开始时间" size="small"
                  style="width:120px" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker v-model="headerSearchForm.endDate" type="datetime" placeholder="选择结束时间" size="small"
                  style="width:120px" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
                <el-button type="primary" @click="handleReset" size="small">重置</el-button>
                <el-button type="success" @click="handleExport" size="small">导出</el-button>
              </el-form-item>
            </el-form>
          </el-form>
        </div>


      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table :data="tableData" :cell-class-name="bandCellClassName"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="serialNumber" label="序号" fixed="left" width="50px">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="coilNumber" label="钢卷号" width="150px" />
            <el-table-column prop="coilGrade" label="钢种" />
            <el-table-column prop="inWidth" label="入口宽度(mm)" width="110px" />
            <el-table-column prop="inThickness" label="入口厚度(mm)" width="110px" />
            <el-table-column prop="outWidth" label="出口宽度(mm)" width="110px" />
            <el-table-column prop="outThickness" label="出口厚度(mm)" width="110px" />
            <el-table-column prop="planTime" label="记录时间" width="150px" />
            <!-- <el-table-column prop="prodEndTime" label="生产结束时间" width="150px" /> -->
            <el-table-column prop="ypIndex" label="屈服强度分档" width="110px" />
            <el-table-column prop="widIndex" label="宽度分档" width="110px" />
            <el-table-column prop="thkIndex" label="厚度分档" width="110px" />
            <el-table-column label="轧制力(kN)" header-align="center">
              <el-table-column label="S1" header-align="center">
                <el-table-column prop="JS1" label="计算值" width="80px">
                  <template #default="scope">
                    <span style="color: #67C23A">{{ scope.row.JS1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="rollingForceSetS1" label="设定值" width="80px" />
                <el-table-column prop="rollForce1" label="实际值" width="80px" />
              </el-table-column>
              <el-table-column label="S2" header-align="center">
                <el-table-column prop="JS2" label="计算值" width="80px">
                  <template #default="scope">
                    <span style="color: #67C23A">{{ scope.row.JS2 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="rollingForceSetS2" label="设定值" width="80px" />
                <el-table-column prop="rollForce2" label="实际值" width="80px" />
              </el-table-column>
              <el-table-column label="S3" header-align="center">
                <el-table-column prop="JS3" label="计算值" width="80px">
                  <template #default="scope">
                    <span style="color: #67C23A">{{ scope.row.JS3 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="rollingForceSetS3" label="设定值" width="80px" />
                <el-table-column prop="rollForce3" label="实际值" width="80px" />
              </el-table-column>
              <el-table-column label="S4" header-align="center">
                <el-table-column prop="JS4" label="计算值" width="80px">
                  <template #default="scope">
                    <span style="color: #67C23A">{{ scope.row.JS4 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="rollingForceSetS4" label="设定值" width="80px" />
                <el-table-column prop="rollForce4" label="实际值" width="80px" />
              </el-table-column>
              <el-table-column label="S5" header-align="center">
                <el-table-column prop="JS5" label="计算值" width="80px">
                  <template #default="scope">
                    <span style="color: #67C23A">{{ scope.row.JS5 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="rollingForceSetS5" label="设定值" width="80px" />
                <el-table-column prop="rollForce5" label="实际值" width="80px" />
              </el-table-column>
            </el-table-column>
            <el-table-column label="张力(kN)" header-align="center">
              <el-table-column prop="ZHS1" label="S1入口" width="80px" />
              <el-table-column prop="ZHS2" label="S1-S2" width="80px" />
              <el-table-column prop="ZHS3" label="S2-S3" width="80px" />
              <el-table-column prop="ZHS4" label="S3-S4" width="80px" />
              <el-table-column prop="ZHS5" label="S4-S5" width="80px" />
              <el-table-column prop="ZHS6" label="S5出口" width="80px" />
            </el-table-column>
            <el-table-column label="速度(m/min)" header-align="center">
              <el-table-column prop="SpeedS1" label="S1" width="85px" />
              <el-table-column prop="SpeedS2" label="S2" width="85px" />
              <el-table-column prop="SpeedS3" label="S3" width="85px" />
              <el-table-column prop="SpeedS4" label="S4" width="85px" />
              <el-table-column prop="SpeedS5" label="S5" width="85px" />
            </el-table-column>
            <el-table-column label="厚度(mm)" header-align="center">
              <el-table-column prop="ThickS1" label="S1" width="65px" />
              <el-table-column prop="ThickS2" label="S2" width="65px" />
              <el-table-column prop="ThickS3" label="S3" width="65px" />
              <el-table-column prop="ThickS4" label="S4" width="65px" />
              <el-table-column prop="ThickS5" label="S5" width="65px" />
            </el-table-column>
            <el-table-column label="功率(%)" header-align="center">
              <el-table-column prop="PowerS1" label="S1" width="65px">
                <template #default="scope">
                  <span>{{ scope.row.PowerS1 }}{{ scope.row.PowerS1 !== '-' ? '%' : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="PowerS2" label="S2" width="65px">
                <template #default="scope">
                  <span>{{ scope.row.PowerS2 }}{{ scope.row.PowerS2 !== '-' ? '%' : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="PowerS3" label="S3" width="65px">
                <template #default="scope">
                  <span>{{ scope.row.PowerS3 }}{{ scope.row.PowerS3 !== '-' ? '%' : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="PowerS4" label="S4" width="65px">
                <template #default="scope">
                  <span>{{ scope.row.PowerS4 }}{{ scope.row.PowerS4 !== '-' ? '%' : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="PowerS5" label="S5" width="65px">
                <template #default="scope">
                  <span>{{ scope.row.PowerS5 }}{{ scope.row.PowerS5 !== '-' ? '%' : '' }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="工作辊弯辊力(kN)" header-align="center">
              <el-table-column prop="wbendS1" label="S1" />
              <el-table-column prop="wbendS2" label="S2" />
              <el-table-column prop="wbendS3" label="S3" />
              <el-table-column prop="wbendS4" label="S4" />
              <el-table-column prop="wbendS5" label="S5" />
            </el-table-column>
            <!-- <el-table-column label="中间辊弯辊力(kN)" header-align="center">
              <el-table-column prop="imbendS1" label="S1" />
              <el-table-column prop="imbendS2" label="S2" />
              <el-table-column prop="imbendS3" label="S3" />
              <el-table-column prop="imbendS4" label="S4" />
              <el-table-column prop="imbendS5" label="S5" />
            </el-table-column> -->
            <el-table-column label="ZP值" header-align="center">
              <el-table-column prop="zp1" label="ZP1" />
              <el-table-column prop="zp2" label="ZP2" />
              <el-table-column prop="zp3" label="ZP3" />
              <el-table-column prop="zp4" label="ZP4" />
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="90">
              <template #default="scope">
                <!-- <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                <el-button type="warning" @click="handleCheck(scope.row)">查看</el-button>
                <!-- <el-button type="primary" @click="handleQuote(scope.row)">引用</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" size="small" />
        </div>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="模型计算"
      style="text-align: left;width: 95%; height: 90vh;--el-dialog-title-font-size: 16px;margin-top:10px">
      <el-row>
        <el-col style="font-size:12px">
          <div class="msg-title">基本信息</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;margin-left:15px">
        <el-col :span="4" style="font-size:12px">
          <div>
            <span>卷号</span>
            <el-input v-model="detailData.coilNo" placeholder="请输入" style="width:120px;height:20px;margin-left:4px;" />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>钢种</span>
            <el-input v-model="detailData.steelGrade" placeholder="请输入"
              style="width:120px;height:20px;margin-left:4px" />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>屈服强度</span>
            <el-input v-model="detailData.yp" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>出宽</span>
            <el-input v-model="detailData.exWidth" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
          </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;margin-left:10px">
          <div>
            <span>出厚</span>
            <el-input v-model="detailData.exThick" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
          </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;margin-left:10px">
          <div>
            <span>入厚</span>
            <el-input v-model="detailData.enThick" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
          </div>
        </el-col>

      </el-row>
      <el-row style="margin-top:10px;margin-left:15px">
        <el-col :span="4" style="font-size:12px">
          <div>
            <span>屈服强度分档</span>
            <el-input v-model="detailData.ypIndex" placeholder="请输入" style="width:120px;height:20px;margin-left:4px;" />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>宽度分档</span>
            <el-input v-model="detailData.widIndex" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>厚度分档</span>
            <el-input v-model="detailData.thkIndex" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col style="font-size:12px">
          <div class="msg-title">轧制规程参数</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:6px;margin-left:15px">
        <el-col style="font-size:12px;">
          <el-table :data="rollingProcedureTable" style="width: 100%"
            :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '12px' }"
            :cell-style="{ fontSize: '12px' }">
            <el-table-column prop="ITEM" label="" />
            <el-table-column prop="S5" label="S5机架" />
            <el-table-column prop="S4" label="S4机架" />
            <el-table-column prop="S3" label="S3机架" />
            <el-table-column prop="S2" label="S2机架" />
            <el-table-column prop="S1" label="S1机架" />
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="font-size:12px">
          <div class="msg-title">仿真结果输出</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:6px;margin-left:15px">
        <el-col style="font-size:12px;">
          <el-table :data="simulationResultOutTable" style="width: 100%"
            :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '12px' }"
            :cell-style="{ fontSize: '12px' }">
            <el-table-column prop="ITEM" label="" />
            <el-table-column label="S5机架" header-align="center">
              <el-table-column prop="ZSZ5" label="计算值" />
              <el-table-column prop="SZX5" label="设定值" />
              <el-table-column prop="SJZ5" label="实际值" />
            </el-table-column>
            <el-table-column label="S4机架" header-align="center">
              <el-table-column prop="ZSZ4" label="计算值" />
              <el-table-column prop="SZX4" label="设定值" />
              <el-table-column prop="SJZ4" label="实际值" />
            </el-table-column>
            <el-table-column label="S3机架" header-align="center">
              <el-table-column prop="ZSZ3" label="计算值" />
              <el-table-column prop="SZX3" label="设定值" />
              <el-table-column prop="SJZ3" label="实际值" />
            </el-table-column>
            <el-table-column label="S2机架" header-align="center">
              <el-table-column prop="ZSZ2" label="计算值" />
              <el-table-column prop="SZX2" label="设定值" />
              <el-table-column prop="SJZ2" label="实际值" />
            </el-table-column>
            <el-table-column label="S1机架" header-align="center">
              <el-table-column prop="ZSZ1" label="计算值" />
              <el-table-column prop="SZX1" label="设定值" />
              <el-table-column prop="SJZ1" label="实际值" />
            </el-table-column>
            <el-table-column label="机架前" header-align="center">
              <el-table-column prop="ZSZ_BEFORE" label="计算值" />
              <el-table-column prop="SZX_BEFORE" label="设定值" />
              <el-table-column prop="SJZ_BEFORE" label="实际值" />
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row style="margin-top:3px;margin-left:15px;margin-bottom: 40px;">
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts :title="option.title" :series="option.series" :legend="option.legend"
              :graphic="option.graphic" :tooltip="option.tooltip" :x-axis="option.xAxis" :y-axis="option.yAxis"
              :grid="option.grid" style="width:340px;height:240px !important;margin-top:30px" />
          </div>

        </el-col>
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts :title="option1.title" :series="option1.series" :legend="option1.legend"
              :graphic="option1.graphic" :tooltip="option1.tooltip" :x-axis="option1.xAxis" :y-axis="option1.yAxis"
              :grid="option1.grid" style="width:340px;height:240px !important;margin-top:30px" />
          </div>

        </el-col>
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts :title="option2.title" :series="option2.series" :legend="option2.legend"
              :graphic="option2.graphic" :tooltip="option2.tooltip" :x-axis="option2.xAxis" :y-axis="option2.yAxis"
              :grid="option2.grid" style="width:340px;height:240px !important;margin-top:30px" />
          </div>
        </el-col>
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts :title="option3.title" :series="option3.series" :legend="option3.legend"
              :graphic="option3.graphic" :tooltip="option3.tooltip" :x-axis="option3.xAxis" :y-axis="option3.yAxis"
              :grid="option3.grid" style="width:340px;height:240px !important;margin-top:30px" />
          </div>
        </el-col>
      </el-row>





    </el-dialog>


  </div>
</template>
<script lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
import '/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less';
import type { EChartsOption } from 'echarts';
import { rollingSimulationApi } from '/@/api/RollingSimulation/index';

interface SearchForm {
  volumeNum: string; // 卷号
  steelGrade: string; // 钢种
  inletWidth: string; // 宽度分档范围
  entryThickness: string; // 厚度分档范围
  startDate: string; // 开始时间 (可以是Date对象或字符串)
  endDate: string;   // 结束时间 (可以是Date对象或字符串)
}

// Define an interface for the API response records
interface RollingDataRecord {
  coilNo: string; // Changed from COILNO
  steelGrade: string; // Changed from STEEL_GRADE
  yp: number; // Changed from YP
  enWidth: number; // Changed from EN_WIDTH
  enThick: number; // Changed from EN_THICK
  exWidth: number; // Changed from EX_WIDTH
  exThick: number; // Changed from EX_THICK
  recCreateTime: number; // Changed from REC_CREATE_TIME (string) to number (timestamp)
  rollForce1?: number; // Changed from ROLLFORCE1
  rollForce2?: number;
  rollForce3?: number;
  rollForce4?: number;
  rollForce5?: number;
  tension1?: number; // Changed from TENSION1
  tension2?: number;
  tension3?: number;
  tension4?: number;
  tension5?: number;
  tension6?: number; // Added for completeness, though not mapped to ZHS6 currently
  rollingForceSet1?: number;
  rollingForceSet2?: number;
  rollingForceSet3?: number;
  rollingForceSet4?: number;
  rollingForceSet5?: number;
  wbend1?: number;
  wbend2?: number;
  wbend3?: number;
  wbend4?: number;
  wbend5?: number;
  imbend1?: number;
  imbend2?: number;
  imbend3?: number;
  imbend4?: number;
  imbend5?: number;
  zp1?: number;
  zp2?: number;
  zp3?: number;
  zp4?: number;
  speed1?: number;
  speed2?: number;
  speed3?: number;
  speed4?: number;
  speed5?: number;
  thk1?: number;
  thk2?: number;
  thk3?: number;
  thk4?: number;
  thk5?: number;
  power1?: number;
  power2?: number;
  power3?: number;
  power4?: number;
  power5?: number;
  // Include any other fields that might be in the item
  [key: string]: any; // Allow other properties if not all are defined
}

// Interface for the API response for findAcidRollingProduct (flat structure based on user example)
interface AcidRollingProductApiResponse {
  coilNo?: string;
  steelGrade?: string;
  prodEndTime?: string;
  yp?: number;
  enWidth?: number; // Not in example data, but might be useful if present
  enThick?: number;
  exWidth?: number;
  exThick?: number;
  recCreateTime?: number; // timestamp
  rollForce1?: number;
  rollForce2?: number;
  rollForce3?: number;
  rollForce4?: number;
  rollForce5?: number;
  rollingForceSet1?: number | null;
  rollingForceSet2?: number | null;
  rollingForceSet3?: number | null;
  rollingForceSet4?: number | null;
  rollingForceSet5?: number | null;
  wrDia1?: number;
  wrDia2?: number;
  wrDia3?: number;
  wrDia4?: number;
  wrDia5?: number;
  speed1?: number;
  speed2?: number;
  speed3?: number;
  speed4?: number;
  speed5?: number;
  tension1?: number;
  tension2?: number;
  tension3?: number;
  tension4?: number;
  tension5?: number;
  tension6?: number; // Example shows tension6
  thk1?: number; // Actual thickness per stand?
  thk2?: number;
  thk3?: number;
  thk4?: number;
  thk5?: number;
  nr1?: number; // Production count?
  nr2?: number;
  nr3?: number;
  nr4?: number;
  nr5?: number;
  power1?: number; // Corrected casing: lowercase 'p'
  power2?: number;
  power3?: number;
  power4?: number;
  power5?: number;
  ypIndex?: number;
  widIndex?: number;
  thkIndex?: number;
  l?: number; // Other fields from example
  lnew?: number;
  m?: number;
  n?: number;
  nnew?: number;
  zp1?: number;
  zp2?: number;
  zp3?: number;
  zp4?: number;
  wbend1?: number;
  wbend2?: number;
  wbend3?: number;
  wbend4?: number;
  wbend5?: number;
  imbend1?: number;
  imbend2?: number;
  imbend3?: number;
  imbend4?: number;
  imbend5?: number;
  motorPower1?: number;
  motorPower2?: number;
  motorPower3?: number;
  motorPower4?: number;
  motorPower5?: number;
  tensionSet1?: number;
  tensionSet2?: number;
  tensionSet3?: number;
  tensionSet4?: number;
  tensionSet5?: number;
  speedSet1?: number;
  speedSet2?: number;
  speedSet3?: number;
  speedSet4?: number;
  speedSet5?: number;
  speedSet6?: number;
  [key: string]: any; // Allow other properties
}

// Interface for the detail pop-up data (nested structure for easier use in template/logic)
interface DetailData {
  coilNo?: string;
  steelGrade?: string;
  prodEndTime?: string;
  yp?: number;
  exWidth?: number;
  exThick?: number;
  enThick?: number;
  ypIndex?: number;
  widIndex?: number;
  thkIndex?: number;
  power?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  motorPower?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  wrDia?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  rollForceSet?: { S1?: number | null, S2?: number | null, S3?: number | null, S4?: number | null, S5?: number | null }; // Allow null
  rollForceActual?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number }; // Store as number
  tensionSet?: { BEFORE?: number, S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  tensionActual?: { BEFORE?: number, S1?: number, S2?: number, S3?: number, S4?: number, S5?: number }; // Store as number
  speedSet?: { BEFORE?: number, S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  speedActual?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number }; // Store as number
  speedSet6?: number;
  thicknessActual?: { S1?: string, S2?: string, S3?: string, S4?: string, S5?: string }; // Store as formatted string
  nr?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number }; // Store as number
  wbend?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  imbend?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  zp?: { zp1?: number, zp2?: number, zp3?: number, zp4?: number };
  rollForceCalculated?: { S1?: number, S2?: number, S3?: number, S4?: number, S5?: number };
  exitThk1?: number;
  exitThk2?: number;
  exitThk3?: number;
  exitThk4?: number;
  exitThk5?: number;
}

// 在updateSimulationResultOutTable函数上方添加一个接口定义，用于模拟表格行数据的类型
interface SimulationResultRow {
  ITEM: string;
  ZSZ_BEFORE: string;
  SZX_BEFORE: string;
  SJZ_BEFORE: string;
  ZSZ1: string;
  SZX1: string;
  SJZ1: string;
  ZSZ2: string;
  SZX2: string;
  SJZ2: string;
  ZSZ3: string;
  SZX3: string;
  SJZ3: string;
  ZSZ4: string;
  SZX4: string;
  SJZ4: string;
  ZSZ5: string;
  SZX5: string;
  SJZ5: string;
}

// 新增：自定义时间格式化函数
function formatCustomDate(val: string | Date): string {
  if (!val) return '';
  const date = typeof val === 'string' ? new Date(val) : val;
  if (isNaN(date.getTime())) return '';
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const h = String(date.getHours()).padStart(2, '0');
  const min = String(date.getMinutes()).padStart(2, '0');
  const s = String(date.getSeconds()).padStart(2, '0');
  const ms = String(date.getMilliseconds()).padStart(6, '0'); // 补足6位
  return `${y}-${m}-${d}-${h}.${min}.${s}.${ms}`;
}

// 新增：功率数据处理函数，将功率值除以基数转换为百分比显示
function formatPowerValue(val: number | undefined, isS1: boolean = false): string {
  if (val === undefined || val === null || isNaN(val)) return '-';
  const base = isS1 ? 5470 : 7800;  // S1使用5470，其他机架使用7800
  const percent = Math.round((val / base) * 100);  // 功率值除以基数再乘以100得到百分比
  return `${percent}%`;
}

export default defineComponent({
  name: 'DataDictionary',
  setup() {
    const headerSearchForm = reactive<SearchForm>({
      volumeNum: '',
      steelGrade: '',
      inletWidth: '',
      entryThickness: '',
      startDate: '', // 初始化为空字符串或默认Date
      endDate: '',   // 初始化为空字符串或默认Date
    });

    // 宽度分档范围选项
    const widthRangeOptions = ref([
      { label: '[0,1000)', value: '0' },
      { label: '[1000,1250)', value: '1' },
      { label: '[1250,1450)', value: '2' },
      { label: '[1450,1650)', value: '3' },
      { label: '[1650,1850)', value: '4' },
      { label: '[1850,2050)', value: '5' },
      { label: '[2050,9999)', value: '6' }
    ])

    // 厚度分档范围选项
    const thicknessRangeOptions = ref([
      { label: '[0.25,0.325)', value: '0' },
      { label: '[0.325,0.375)', value: '1' },
      { label: '[0.375,0.425)', value: '2' },
      { label: '[0.425,0.475)', value: '3' },
      { label: '[0.475,0.575)', value: '4' },
      { label: '[0.575,0.675)', value: '5' },
      { label: '[0.675,0.825)', value: '6' },
      { label: '[0.825,0.925)', value: '7' },
      { label: '[0.925,1.05)', value: '8' },
      { label: '[1.05,1.25)', value: '9' },
      { label: '[1.25,1.55)', value: '10' },
      { label: '[1.55,1.85)', value: '11' },
      { label: '[1.85,2.1)', value: '12' },
      { label: '[2.1,2.60)', value: '13' },
      { label: '[2.60,9.9)', value: '14' }
    ])

    const dialogVisible = ref<boolean>(false);
    const detailData = reactive<DetailData>({}); // Reactive object for dialog data

    // 表格数据
    const tableData = ref<any[]>([]); // 初始化为空数组，将由API填充
    const rollingProcedureTable = ref([
      {
        ITEM: "工作辊直径(mm)",
        S5: "460",
        S4: "460",
        S3: "460",
        S2: "460",
        S1: "460"
      }
    ]);

    const simulationResultOutTable = ref<SimulationResultRow[]>([
      {
        ITEM: "速度(m/min)",
        ZSZ_BEFORE: "/",
        SZX_BEFORE: "/",
        SJZ_BEFORE: "/",
        ZSZ1: "355",
        SZX1: "515",
        SJZ1: "515",
        ZSZ2: "355",
        SZX2: "515",
        SJZ2: "515",
        ZSZ3: "355",
        SZX3: "515",
        SJZ3: "515",
        ZSZ4: "355",
        SZX4: "515",
        SJZ4: "515",
        ZSZ5: "355",
        SZX5: "515",
        SJZ5: "515",
      },
      // ... 其余行保持相同格式
    ]);

    const option = reactive<EChartsOption>({
      legend: {
        data: ["计算值", "实际值"],
        align: "right",
        right: 20,
        top: 35,
        textStyle: {
          color: "#6d7882",
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35
      },
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '轧制力/kN',
        nameLocation: 'middle',
        nameGap: 35,
        nameTextStyle: {
          fontSize: '12px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },
      series: [
        {
          name: "计算值",
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        },
        {
          name: "实际值",
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ],
      title: {},
      graphic: {},
      tooltip: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    });
    const option1 = reactive<EChartsOption>({
      legend: {
        data: ["计算值", "实际值"],
        align: "right",
        right: 20,
        top: 35,
        textStyle: {
          color: "#6d7882",
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35
      },
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '张力/kN',
        nameLocation: 'middle',
        nameGap: 35,
        nameTextStyle: {
          fontSize: '12px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },

      series: [
        {
          name: '计算值',
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        },
        {
          name: '实际值',
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ],
      title: {},
      graphic: {},
      tooltip: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    });
    const option2 = reactive<EChartsOption>({
      legend: {
        data: ["计算值", "实际值"],
        align: "right",
        right: 20,
        top: 35,
        textStyle: {
          color: "#6d7882",
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35
      },
      xAxis: {
        splitLine: {
          show: false
        },
        axisLabel: {
          fontSize: 10
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '速度[m/min]',
        nameLocation: 'middle',
        nameGap: 35,
        nameTextStyle: {
          fontSize: '12px',
          color: "#6d7882",
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          fontSize: 10
        }
      },
      series: [
        {
          name: '计算值',
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        },
        {
          name: '实际值',
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ],
      title: {},
      graphic: {},
      tooltip: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    });
    const option3 = reactive<EChartsOption>({
      legend: {
        data: ["计算值", "实际值"],
        align: "right",
        right: 20,
        top: 35,
        textStyle: {
          color: "#6d7882",
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35
      },
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '功率/%',
        nameLocation: 'middle',
        nameGap: 35,
        nameTextStyle: {
          fontSize: '12px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },
      series: [
        {
          name: '计算值',
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        },
        {
          name: '实际值',
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ],
      title: {},
      graphic: {},
      tooltip: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    });


    const dataSourceType = ref('');


    const dataSourceTypeOptions = ref([
      { label: 'PLC', value: 'PLC' },
      { label: '传感器', value: '传感器' },
      { label: 'AI算法', value: 'AI算法' },
      { label: '称重传感器', value: '称重传感器' },
      { label: '电池管理系统', value: '电池管理系统' },
    ]);

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 30,
      total: tableData.value.length,
    });

    // 窗口大小变化处理
    const handleResize = () => {
      nextTick(() => {
        // 这里可以添加表格自适应高度的逻辑
      });
    };

    // 工具函数：字段label映射
    // function getFieldLabel(key: string): string {
    //   if (/^cpc(\d+)Avg$/.test(key)) {
    //     const idx = Number(RegExp.$1);
    //     if (idx < 90) return `CPC${idx}`;
    //     return `CPC9-${idx - 90}`;
    //   }
    //   if (/^cpc(\d+)StripMax$/.test(key)) {
    //     const idx = Number(RegExp.$1);
    //     if (idx < 90) return `CPC${idx}带钢最大值`;
    //     return `CPC9-${idx - 90}带钢最大值`;
    //   }
    //   if (/^cpc(\d+)StripAvg$/.test(key)) {
    //     const idx = Number(RegExp.$1);
    //     if (idx < 90) return `CPC${idx}带钢均值`;
    //     return `CPC9-${idx - 90}带钢均值`;
    //   }
    //   if (key === 'createTime') return '生产时间';
    //   if (key === 'entid') return '入口卷号';
    //   if (key === 'extid') return '出口卷号';
    //   if (key === 'steelGrade') return '钢种';
    //   if (key === 'width') return '宽度';
    //   if (key === 'thick') return '厚度';
    //   if (key === 'widthCode') return '宽度分档';
    //   if (key === 'thickCode') return '厚度分档号';
    //   if (key === 'gradeCode') return '钢种分档';
    //   if (key === 'paopianFlag') return '是否跑偏';
    //   if (key === 'paopianFlagTrue') return '纠偏满载';
    //   if (key === 'shiftNo') return '班次';
    //   // 其他字段按实际含义补充
    //   return key;
    // }
    // 格式化时间
    // function formatDate(val: any): string {
    //   if (!val) return '-';
    //   const date = new Date(Number(val));
    //   if (isNaN(date.getTime())) return '-';
    //   const y = date.getFullYear();
    //   const m = String(date.getMonth() + 1).padStart(2, '0');
    //   const d = String(date.getDate()).padStart(2, '0');
    //   const h = String(date.getHours()).padStart(2, '0');
    //   const min = String(date.getMinutes()).padStart(2, '0');
    //   const s = String(date.getSeconds()).padStart(2, '0');
    //   return `${y}-${m}-${d} ${h}:${min}:${s}`;
    // }

    const handleCheck = async (row: any) => {
      if (!row.coilNumber) {
        ElMessage.error('钢卷号不存在，无法查询详情');
        return;
      }
      try {
        ElMessage.info('正在查询详情...');
        const response = await rollingSimulationApi.findAcidRollingProduct({ volumeNum: row.coilNumber });
        console.log('Detail API Response:', response);

        if (response && response.data && response.data.data) {
          const apiData: AcidRollingProductApiResponse = response.data.data;
          console.log("dfddsfasf")
          // Re-initialize detailData to ensure clean state and correct types
          const newDetailData: DetailData = {
            coilNo: apiData.coilNo,
            steelGrade: apiData.steelGrade,
            yp: apiData.yp,
            prodEndTime:apiData.prodEndTime,
            exWidth: apiData.exWidth,
            exThick: apiData.exThick,
            enThick: apiData.enThick,
            ypIndex: apiData.ypIndex,
            widIndex: apiData.widIndex,
            thkIndex: apiData.thkIndex,
            power: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            motorPower: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            wrDia: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            rollForceSet: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            rollForceActual: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            tensionSet: { BEFORE: undefined, S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            tensionActual: { BEFORE: undefined, S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            speedSet: { BEFORE: undefined, S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            speedActual: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            speedSet6: undefined,
            thicknessActual: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            nr: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            wbend: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            imbend: { S1: undefined, S2: undefined, S3: undefined, S4: undefined, S5: undefined },
            zp: { zp1: undefined, zp2: undefined, zp3: undefined, zp4: undefined },
            rollForceCalculated: undefined
          };

          for (let i = 1; i <= 5; i++) {
            const standKey = `S${i}` as 'S1' | 'S2' | 'S3' | 'S4' | 'S5';
            // Power
            if (newDetailData.power && apiData[`power${i}`] !== undefined)
              newDetailData.power[standKey] = Math.round(apiData[`power${i}`]);
            // Motor Power
            if (newDetailData.motorPower && apiData[`motorPower${i}`] !== undefined)
              newDetailData.motorPower[standKey] = Math.round(apiData[`motorPower${i}`]);
            // WR Dia
            if (newDetailData.wrDia && apiData[`wrDia${i}`] !== undefined)
              newDetailData.wrDia[standKey] = apiData[`wrDia${i}`];
            // Roll Force Set
            if (newDetailData.rollForceSet && apiData[`rollingForceSet${i}`] !== undefined)
              newDetailData.rollForceSet[standKey] = apiData[`rollingForceSet${i}`] !== null ? Math.round(apiData[`rollingForceSet${i}`]) : null;
            // Roll Force Actual
            if (newDetailData.rollForceActual && apiData[`rollForce${i}`] !== undefined)
              newDetailData.rollForceActual[standKey] = Math.round(apiData[`rollForce${i}`]);
            // Tension Set - Custom mapping, handled below
            // Speed Set - Custom mapping, handled below
            // Speed Actual
            if (newDetailData.speedActual && apiData[`speed${i}`] !== undefined)
              newDetailData.speedActual[standKey] = Math.round(apiData[`speed${i}`]);
                      // Thickness Actual
          if (newDetailData.thicknessActual && apiData[`thk${i}`] !== undefined)
            newDetailData.thicknessActual[standKey] = Number(apiData[`thk${i}`]).toFixed(3);
            // NR
            if (newDetailData.nr && apiData[`nr${i}`] !== undefined)
              newDetailData.nr[standKey] = apiData[`nr${i}`];
            // Wbend
            if (newDetailData.wbend && apiData[`wbend${i}`] !== undefined)
              newDetailData.wbend[standKey] = apiData[`wbend${i}`];
            // Imbend
            if (newDetailData.imbend && apiData[`imbend${i}`] !== undefined)
              newDetailData.imbend[standKey] = apiData[`imbend${i}`];
          }

          // Custom mapping for Tension Set
          if (newDetailData.tensionSet) {
            newDetailData.tensionSet.BEFORE = apiData.tensionSet1;
            newDetailData.tensionSet.S1 = apiData.tensionSet2;
            newDetailData.tensionSet.S2 = apiData.tensionSet3;
            newDetailData.tensionSet.S3 = apiData.tensionSet4;
            newDetailData.tensionSet.S4 = apiData.tensionSet5;
            newDetailData.tensionSet.S5 = apiData.tensionSet6;
          }

          // Custom mapping for Tension Actual
          if (newDetailData.tensionActual) {
            newDetailData.tensionActual.BEFORE = apiData.tension1;
            newDetailData.tensionActual.S1 = apiData.tension2;
            newDetailData.tensionActual.S2 = apiData.tension3;
            newDetailData.tensionActual.S3 = apiData.tension4;
            newDetailData.tensionActual.S4 = apiData.tension5;
            newDetailData.tensionActual.S5 = apiData.tension6;
          }

          // Custom mapping for Speed Set
          if (newDetailData.speedSet) {
            newDetailData.speedSet.BEFORE = apiData.speedSet1 ? Math.round(apiData.speedSet1) : undefined;
            newDetailData.speedSet.S1 = apiData.speedSet2 ? Math.round(apiData.speedSet2) : undefined;
            newDetailData.speedSet.S2 = apiData.speedSet3 ? Math.round(apiData.speedSet3) : undefined;
            newDetailData.speedSet.S3 = apiData.speedSet4 ? Math.round(apiData.speedSet4) : undefined;
            newDetailData.speedSet.S4 = apiData.speedSet5 ? Math.round(apiData.speedSet5) : undefined;
            newDetailData.speedSet.S5 = apiData.speedSet6 ? Math.round(apiData.speedSet6) : undefined;
          }

          // Populate speedSet6 - No longer needed with new mapping
          // newDetailData.speedSet6 = apiData.speedSet6 ? Math.round(apiData.speedSet6) : undefined;

          // Populate ZP values
          if (newDetailData.zp) {
            newDetailData.zp.zp1 = apiData.zp1;
            newDetailData.zp.zp2 = apiData.zp2;
            newDetailData.zp.zp3 = apiData.zp3;
            newDetailData.zp.zp4 = apiData.zp4;
          }

          // 赋值轧制力计算值（jszRollForce1-5 -> rollForceCalculated）
          newDetailData.rollForceCalculated = {
            S1: Math.round((apiData.jszRollForce1) * 10),
            S2: Math.round((apiData.jszRollForce2) * 10),
            S3: Math.round((apiData.jszRollForce3) * 10),
            S4: Math.round((apiData.jszRollForce4) * 10),
            S5: Math.round((apiData.jszRollForce5) * 10),
          };
          Object.assign(detailData, newDetailData);
          // 挂载 red1~red5 字段，确保表格有数据
          (detailData as any).red1 = apiData.red1;
          (detailData as any).red2 = apiData.red2;
          (detailData as any).red3 = apiData.red3;
          (detailData as any).red4 = apiData.red4;
          (detailData as any).red5 = apiData.red5;
          // ←←← 就在这里插入
          (detailData as any).exitThk1 = apiData.exitThk1;
          (detailData as any).exitThk2 = apiData.exitThk2;
          (detailData as any).exitThk3 = apiData.exitThk3;
          (detailData as any).exitThk4 = apiData.exitThk4;
          (detailData as any).exitThk5 = apiData.exitThk5;
          // Update dialog tables
          updateRollingProcedureTable(detailData);
          updateSimulationResultOutTable(detailData);
          // TODO: Update ECharts options based on detailData
          updateCharts(detailData);

          dialogVisible.value = true;
          ElMessage.success('详情查询成功');
        } else {
          ElMessage.error('未查询到详情数据或响应格式不正确');
        }
      } catch (error: any) {
        console.error('查询详情失败:', error);
        ElMessage.error(error.msg || error.message || '查询详情失败');
      }
    }

    const updateRollingProcedureTable = (data: DetailData) => {
      rollingProcedureTable.value = [
        {
          ITEM: "工作辊直径(mm)",
          S5: data.wrDia?.S5?.toString() ?? '-',
          S4: data.wrDia?.S4?.toString() ?? '-',
          S3: data.wrDia?.S3?.toString() ?? '-',
          S2: data.wrDia?.S2?.toString() ?? '-',
          S1: data.wrDia?.S1?.toString() ?? '-'
        },
        {
          ITEM: "生产卷数",
          S5: data.nr?.S5?.toString() ?? '-',
          S4: data.nr?.S4?.toString() ?? '-',
          S3: data.nr?.S3?.toString() ?? '-',
          S2: data.nr?.S2?.toString() ?? '-',
          S1: data.nr?.S1?.toString() ?? '-'
        },
        {
          ITEM: "初始压下率",
          S5: (data as any).red5?.toString() ?? '-',
          S4: (data as any).red4?.toString() ?? '-',
          S3: (data as any).red3?.toString() ?? '-',
          S2: (data as any).red2?.toString() ?? '-',
          S1: (data as any).red1?.toString() ?? '-'
        },
        // {
        //   ITEM: "轧制力设定(kN)",
        //   S5: data.rollForceSet?.S5?.toString() ?? '-',
        //   S4: data.rollForceSet?.S4?.toString() ?? '-',
        //   S3: data.rollForceSet?.S3?.toString() ?? '-',
        //   S2: data.rollForceSet?.S2?.toString() ?? '-',
        //   S1: data.rollForceSet?.S1?.toString() ?? '-'
        // },
      ];
    };
    // 纵向分组：从“轧制力(kN)”起的一级列组，隔一组标浅色背景
    function bandCellClassName({ column }: { column: any }) {
      const prop: string = column?.property || '';
      // 按页面从“轧制力(kN)”一级开始的列组顺序，识别属于该组的字段前缀
      const groupPrefixes = [
        // 轧制力 → 张力 → 速度 → 厚度 → 功率 → 工作辊弯辊力 → 中间辊弯辊力(若启用) → ZP值
        'JS', 'rollingForceSetS', 'rollForce', // 轧制力相关
        'ZHS',                                 // 张力
        'SpeedS',                              // 速度
        'ThickS',                              // 厚度
        'PowerS',                              // 功率
        'wbendS',                              // 工作辊弯辊力
        'imbendS',                             // 中间辊弯辊力（当前模板注释，保留兼容）
        'zp'                                   // ZP
      ];
      // 找到命中的前缀
      const hitIndex = groupPrefixes.findIndex(prefix => prop.startsWith(prefix));
      if (hitIndex === -1) return '';
      // 需求：整个“轧制力(kN)”组（JS/rollingForceSetS/rollForce）全部标浅蓝；最后的 ZP 值也标浅蓝
      const isRollingForce = ['JS','rollingForceSetS','rollForce'].some(p => prop.startsWith(p));
      if (isRollingForce) return 'band-blue';
      if (prop.startsWith('zp')) return 'band-blue';
      // 其余从“轧制力”起按组交替（偶数组高亮）
      return hitIndex % 2 === 0 ? 'band-blue' : '';
    }


    const updateSimulationResultOutTable = (data: DetailData) => {
      simulationResultOutTable.value = [
        {
          ITEM: "厚度(mm)", ZSZ_BEFORE: "-", SZX_BEFORE: "-", SJZ_BEFORE: "-",
          ZSZ5: data.exitThk5?.toString() ?? '-', SZX5: '-', SJZ5: data.thicknessActual?.S5?.toString() ?? '-',
          ZSZ4: data.exitThk4?.toString() ?? '-', SZX4: '-', SJZ4: data.thicknessActual?.S4?.toString() ?? '-',
          ZSZ3: data.exitThk3?.toString() ?? '-', SZX3: '-', SJZ3: data.thicknessActual?.S3?.toString() ?? '-',
          ZSZ2: data.exitThk2?.toString() ?? '-', SZX2: '-', SJZ2: data.thicknessActual?.S2?.toString() ?? '-',
          ZSZ1: data.exitThk1?.toString() ?? '-', SZX1: '-', SJZ1: data.thicknessActual?.S1?.toString() ?? '-',
        },
        {
          ITEM: "速度(m/min)", ZSZ_BEFORE: data.speedSet?.BEFORE?.toString() ?? '-', SZX_BEFORE: "-", SJZ_BEFORE: "-",
          ZSZ5: data.speedSet?.S5?.toString() ?? '-', SZX5: '-', SJZ5: data.speedActual?.S5?.toString() ?? '-',
          ZSZ4: data.speedSet?.S4?.toString() ?? '-', SZX4: '-', SJZ4: data.speedActual?.S4?.toString() ?? '-',
          ZSZ3: data.speedSet?.S3?.toString() ?? '-', SZX3: '-', SJZ3: data.speedActual?.S3?.toString() ?? '-',
          ZSZ2: data.speedSet?.S2?.toString() ?? '-', SZX2: '-', SJZ2: data.speedActual?.S2?.toString() ?? '-',
          ZSZ1: data.speedSet?.S1?.toString() ?? '-', SZX1: '-', SJZ1: data.speedActual?.S1?.toString() ?? '-',
        },
        {
          ITEM: "张力(kN)",
          ZSZ_BEFORE: data.tensionSet?.BEFORE?.toString() ?? '-', SZX_BEFORE: "-", SJZ_BEFORE: (typeof data.tensionActual?.BEFORE === 'number' ? Math.round(data.tensionActual.BEFORE).toString() : (typeof data.tensionActual?.BEFORE === 'string' ? data.tensionActual.BEFORE : '-')),
          ZSZ5: data.tensionSet?.S5?.toString() ?? '-', SZX5: '-', SJZ5: (typeof data.tensionActual?.S5 === 'number' ? Math.round(data.tensionActual.S5).toString() : (typeof data.tensionActual?.S5 === 'string' ? data.tensionActual.S5 : '-')),
          ZSZ4: data.tensionSet?.S4?.toString() ?? '-', SZX4: '-', SJZ4: (typeof data.tensionActual?.S4 === 'number' ? Math.round(data.tensionActual.S4).toString() : (typeof data.tensionActual?.S4 === 'string' ? data.tensionActual.S4 : '-')),
          ZSZ3: data.tensionSet?.S3?.toString() ?? '-', SZX3: '-', SJZ3: (typeof data.tensionActual?.S3 === 'number' ? Math.round(data.tensionActual.S3).toString() : (typeof data.tensionActual?.S3 === 'string' ? data.tensionActual.S3 : '-')),
          ZSZ2: data.tensionSet?.S2?.toString() ?? '-', SZX2: '-', SJZ2: (typeof data.tensionActual?.S2 === 'number' ? Math.round(data.tensionActual.S2).toString() : (typeof data.tensionActual?.S2 === 'string' ? data.tensionActual.S2 : '-')),
          ZSZ1: data.tensionSet?.S1?.toString() ?? '-', SZX1: '-', SJZ1: (typeof data.tensionActual?.S1 === 'number' ? Math.round(data.tensionActual.S1).toString() : (typeof data.tensionActual?.S1 === 'string' ? data.tensionActual.S1 : '-')),
        },
        {
          ITEM: "轧制力(kN)", ZSZ_BEFORE: "-", SZX_BEFORE: "-", SJZ_BEFORE: "-",
          ZSZ5: (typeof data.rollForceCalculated?.S5 === 'number' && !isNaN(data.rollForceCalculated.S5)) ? Math.round(data.rollForceCalculated.S5).toString() : '-', SZX5: data.rollForceSet?.S5?.toString() ?? '-', SJZ5: data.rollForceActual?.S5?.toString() ?? '-',
          ZSZ4: (typeof data.rollForceCalculated?.S4 === 'number' && !isNaN(data.rollForceCalculated.S4)) ? Math.round(data.rollForceCalculated.S4).toString() : '-', SZX4: data.rollForceSet?.S4?.toString() ?? '-', SJZ4: data.rollForceActual?.S4?.toString() ?? '-',
          ZSZ3: (typeof data.rollForceCalculated?.S3 === 'number' && !isNaN(data.rollForceCalculated.S3)) ? Math.round(data.rollForceCalculated.S3).toString() : '-', SZX3: data.rollForceSet?.S3?.toString() ?? '-', SJZ3: data.rollForceActual?.S3?.toString() ?? '-',
          ZSZ2: (typeof data.rollForceCalculated?.S2 === 'number' && !isNaN(data.rollForceCalculated.S2)) ? Math.round(data.rollForceCalculated.S2).toString() : '-', SZX2: data.rollForceSet?.S2?.toString() ?? '-', SJZ2: data.rollForceActual?.S2?.toString() ?? '-',
          ZSZ1: (typeof data.rollForceCalculated?.S1 === 'number' && !isNaN(data.rollForceCalculated.S1)) ? Math.round(data.rollForceCalculated.S1).toString() : '-', SZX1: data.rollForceSet?.S1?.toString() ?? '-', SJZ1: data.rollForceActual?.S1?.toString() ?? '-',
        },
        {
          ITEM: "功率(%)", ZSZ_BEFORE: "-", SZX_BEFORE: "-", SJZ_BEFORE: "-",
          ZSZ5: formatPowerValue(data.motorPower?.S5, false), SZX5: '-', SJZ5: data.power?.S5?.toString() ? Math.round(data.power.S5).toString() + '%' : '-',
          ZSZ4: formatPowerValue(data.motorPower?.S4, false), SZX4: '-', SJZ4: data.power?.S4?.toString() ? Math.round(data.power.S4).toString() + '%' : '-',
          ZSZ3: formatPowerValue(data.motorPower?.S3, false), SZX3: '-', SJZ3: data.power?.S3?.toString() ? Math.round(data.power.S3).toString() + '%' : '-',
          ZSZ2: formatPowerValue(data.motorPower?.S2, false), SZX2: '-', SJZ2: data.power?.S2?.toString() ? Math.round(data.power.S2).toString() + '%' : '-',
          ZSZ1: formatPowerValue(data.motorPower?.S1, true), SZX1: '-', SJZ1: data.power?.S1?.toString() ? Math.round(data.power.S1).toString() + '%' : '-',
        },
        {
          ITEM: "工作辊弯辊力(kN)", ZSZ_BEFORE: "-", SZX_BEFORE: "-", SJZ_BEFORE: "-",
          ZSZ5: '-', SZX5: '-', SJZ5: (typeof data.wbend?.S5 === 'number' ? Math.round(data.wbend.S5).toString() : (data.wbend?.S5 ? String(data.wbend.S5) : '-')),
          ZSZ4: '-', SZX4: '-', SJZ4: (typeof data.wbend?.S4 === 'number' ? Math.round(data.wbend.S4).toString() : (data.wbend?.S4 ? String(data.wbend.S4) : '-')),
          ZSZ3: '-', SZX3: '-', SJZ3: (typeof data.wbend?.S3 === 'number' ? Math.round(data.wbend.S3).toString() : (data.wbend?.S3 ? String(data.wbend.S3) : '-')),
          ZSZ2: '-', SZX2: '-', SJZ2: (typeof data.wbend?.S2 === 'number' ? Math.round(data.wbend.S2).toString() : (data.wbend?.S2 ? String(data.wbend.S2) : '-')),
          ZSZ1: '-', SZX1: '-', SJZ1: (typeof data.wbend?.S1 === 'number' ? Math.round(data.wbend.S1).toString() : (data.wbend?.S1 ? String(data.wbend.S1) : '-')),
        },
        // {
        //   ITEM: "中间辊弯辊力(kN)", ZSZ_BEFORE: "-", SZX_BEFORE: "-", SJZ_BEFORE: "-",
        //   ZSZ5: '-', SZX5: '-', SJZ5: (typeof data.imbend?.S5 === 'number' ? Math.round(data.imbend.S5).toString() : (data.imbend?.S5 ? String(data.imbend.S5) : '-')),
        //   ZSZ4: '-', SZX4: '-', SJZ4: (typeof data.imbend?.S4 === 'number' ? Math.round(data.imbend.S4).toString() : (data.imbend?.S4 ? String(data.imbend.S4) : '-')),
        //   ZSZ3: '-', SZX3: '-', SJZ3: (typeof data.imbend?.S3 === 'number' ? Math.round(data.imbend.S3).toString() : (data.imbend?.S3 ? String(data.imbend.S3) : '-')),
        //   ZSZ2: '-', SZX2: '-', SJZ2: (typeof data.imbend?.S2 === 'number' ? Math.round(data.imbend.S2).toString() : (data.imbend?.S2 ? String(data.imbend.S2) : '-')),
        //   ZSZ1: '-', SZX1: '-', SJZ1: (typeof data.imbend?.S1 === 'number' ? Math.round(data.imbend.S1).toString() : (data.imbend?.S1 ? String(data.imbend.S1) : '-')),
        // },
        {
          ITEM: "ZP值", ZSZ_BEFORE: "-", SZX_BEFORE: "-", SJZ_BEFORE: "-",
          ZSZ5: '-', SZX5: '-', SJZ5: '-',
          ZSZ4: '-', SZX4: '-', SJZ4: data.zp?.zp4?.toString() ?? '-',
          ZSZ3: '-', SZX3: '-', SJZ3: data.zp?.zp3?.toString() ?? '-',
          ZSZ2: '-', SZX2: '-', SJZ2: data.zp?.zp2?.toString() ?? '-',
          ZSZ1: '-', SZX1: '-', SJZ1: data.zp?.zp1?.toString() ?? '-',
        },
      ];
    };

    const updateCharts = (data: DetailData) => {
      // 更新轧制力图
      option.series = [
        {
          name: "计算值",
          type: 'bar',
          data: [
            data.rollForceCalculated?.S5 ?? 0,
            data.rollForceCalculated?.S4 ?? 0,
            data.rollForceCalculated?.S3 ?? 0,
            data.rollForceCalculated?.S2 ?? 0,
            data.rollForceCalculated?.S1 ?? 0
          ]
        },
        {
          name: "实际值",
          type: 'bar',
          data: [
            data.rollForceActual?.S5 ?? 0,
            data.rollForceActual?.S4 ?? 0,
            data.rollForceActual?.S3 ?? 0,
            data.rollForceActual?.S2 ?? 0,
            data.rollForceActual?.S1 ?? 0
          ]
        }
      ];
      option.xAxis = {
        type: 'category',
        data: ['S5', 'S4', 'S3', 'S2', 'S1'],
        splitLine: { show: false },
        axisLabel: { fontSize: 10 }
      };
      option.graphic = [{
        type: 'text',
        left: 'center',
        top: 10,
        style: {
          text: '轧制力对比',
          fontSize: 12,
          fill: '#333'
        }
      }];

      // 更新张力图
      option1.series = [
        {
          name: "计算值",
          type: 'bar',
          data: [
            data.tensionSet?.S5 ?? 0,
            data.tensionSet?.S4 ?? 0,
            data.tensionSet?.S3 ?? 0,
            data.tensionSet?.S2 ?? 0,
            data.tensionSet?.S1 ?? 0,
            data.tensionSet?.BEFORE ?? 0
          ]
        },
        {
          name: "实际值",
          type: 'bar',
          data: [
            typeof data.tensionActual?.S5 === 'number' ? Math.round(data.tensionActual.S5) : 0,
            typeof data.tensionActual?.S4 === 'number' ? Math.round(data.tensionActual.S4) : 0,
            typeof data.tensionActual?.S3 === 'number' ? Math.round(data.tensionActual.S3) : 0,
            typeof data.tensionActual?.S2 === 'number' ? Math.round(data.tensionActual.S2) : 0,
            typeof data.tensionActual?.S1 === 'number' ? Math.round(data.tensionActual.S1) : 0,
            typeof data.tensionActual?.BEFORE === 'number' ? Math.round(data.tensionActual.BEFORE) : 0
          ]
        }
      ];
      option1.xAxis = {
        type: 'category',
        data: ['S5', 'S4', 'S3', 'S2', 'S1', '机架前'],
        splitLine: { show: false },
        axisLabel: { fontSize: 10 }
      };
      option1.graphic = [{
        type: 'text',
        left: 'center',
        top: 10,
        style: {
          text: '张力对比',
          fontSize: 12,
          fill: '#333'
        }
      }];

      // 更新速度图
      option2.series = [
        {
          name: "计算值",
          type: 'bar',
          data: [
            data.speedSet?.S5 ?? 0,
            data.speedSet?.S4 ?? 0,
            data.speedSet?.S3 ?? 0,
            data.speedSet?.S2 ?? 0,
            data.speedSet?.S1 ?? 0,
            data.speedSet?.BEFORE ?? 0
          ]
        },
        {
          name: "实际值",
          type: 'bar',
          data: [
            data.speedActual?.S5 ?? 0,
            data.speedActual?.S4 ?? 0,
            data.speedActual?.S3 ?? 0,
            data.speedActual?.S2 ?? 0,
            data.speedActual?.S1 ?? 0,
            0 // Placeholder for '机架前' which has no actual value
          ]
        }
      ];
      option2.xAxis = {
        type: 'category',
        data: ['S5', 'S4', 'S3', 'S2', 'S1', '机架前'],
        splitLine: { show: false },
        axisLabel: { fontSize: 10 }
      };
      option2.graphic = [{
        type: 'text',
        left: 'center',
        top: 10,
        style: {
          text: '速度对比',
          fontSize: 12,
          fill: '#333'
        }
      }];

      // 更新功率图
      option3.series = [
        {
          name: "计算值",
          type: 'bar',
          data: [
            data.motorPower?.S5 ? Math.round((data.motorPower.S5 / 7800) * 100) : 0,
            data.motorPower?.S4 ? Math.round((data.motorPower.S4 / 7800) * 100) : 0,
            data.motorPower?.S3 ? Math.round((data.motorPower.S3 / 7800) * 100) : 0,
            data.motorPower?.S2 ? Math.round((data.motorPower.S2 / 7800) * 100) : 0,
            data.motorPower?.S1 ? Math.round((data.motorPower.S1 / 5470) * 100) : 0
          ]
        },
        {
          name: "实际值",
          type: 'bar',
          data: [
            data.power?.S5 ?? 0,
            data.power?.S4 ?? 0,
            data.power?.S3 ?? 0,
            data.power?.S2 ?? 0,
            data.power?.S1 ?? 0
          ]
        }
      ];
      option3.xAxis = {
        type: 'category',
        data: ['S5', 'S4', 'S3', 'S2', 'S1'],
        splitLine: { show: false },
        axisLabel: { fontSize: 10 }
      };
      option3.graphic = [{
        type: 'text',
        left: 'center',
        top: 10,
        style: {
          text: '功率对比',
          fontSize: 12,
          fill: '#333'
        }
      }];
    };

    // 获取表格数据
    const fetchTableData = async () => {
      try {
        const params: any = {
          volumeNum: headerSearchForm.volumeNum || undefined,
          steelGrade: headerSearchForm.steelGrade || undefined,
          // 宽度分档范围：选择后传入前面的数字
          inletWidth: headerSearchForm.inletWidth || undefined,
          // 厚度分档范围：选择后传入前面的数字
          entryThickness: headerSearchForm.entryThickness || undefined,
          pageIndex: String(pagination.currentPage),
          pageSize: String(pagination.pageSize),
          // 修改：时间参数格式化
          startDate: headerSearchForm.startDate ? formatCustomDate(headerSearchForm.startDate) : undefined,
          endDate: headerSearchForm.endDate ? formatCustomDate(headerSearchForm.endDate) : undefined,
        };

        // 移除未定义的参数，避免发送空字符串
        Object.keys(params).forEach(key => {
          if (params[key as keyof typeof params] === undefined) {
            delete params[key as keyof typeof params];
          }
        });

        console.log('Fetching data with params:', params);
        const response = await rollingSimulationApi.findData(params);
        console.log('API Response:', response);

        // Correctly access data from response.data if 'response' is an AxiosResponse
        const responseData = response.data;

        if (responseData && responseData.data && Array.isArray(responseData.data)) {
          tableData.value = responseData.data.map((item: RollingDataRecord) => ({
            coilNumber: item.coilNo,
            coilGrade: item.steelGrade,
            inWidth: item.enWidth,
            inThickness: item.enThick,
            outWidth: item.exWidth,
            outThickness: item.exThick,
            planTime: item.recCreateTime ? new Date(item.recCreateTime).toLocaleString() : '-', // Convert timestamp
            prodEndTime:item.prodEndTime ? new Date(item.prodEndTime).toLocaleString() : '-', 
            JS1: typeof item.jszRollForce1 === 'number' ? Math.round(item.jszRollForce1 * 10) : '-',
            JS2: typeof item.jszRollForce2 === 'number' ? Math.round(item.jszRollForce2 * 10) : '-',
            JS3: typeof item.jszRollForce3 === 'number' ? Math.round(item.jszRollForce3 * 10) : '-',
            JS4: typeof item.jszRollForce4 === 'number' ? Math.round(item.jszRollForce4 * 10) : '-',
            JS5: typeof item.jszRollForce5 === 'number' ? Math.round(item.jszRollForce5 * 10) : '-',
            rollForce1: typeof item.rollForce1 === 'number' ? Math.round(item.rollForce1) : '-',
            rollForce2: typeof item.rollForce2 === 'number' ? Math.round(item.rollForce2) : '-',
            rollForce3: typeof item.rollForce3 === 'number' ? Math.round(item.rollForce3) : '-',
            rollForce4: typeof item.rollForce4 === 'number' ? Math.round(item.rollForce4) : '-',
            rollForce5: typeof item.rollForce5 === 'number' ? Math.round(item.rollForce5) : '-',
            ZHS1: typeof item.tension1 === 'number' ? Math.round(item.tension1) : '-',
            ZHS2: typeof item.tension2 === 'number' ? Math.round(item.tension2) : '-',
            ZHS3: typeof item.tension3 === 'number' ? Math.round(item.tension3) : '-',
            ZHS4: typeof item.tension4 === 'number' ? Math.round(item.tension4) : '-',
            ZHS5: typeof item.tension5 === 'number' ? Math.round(item.tension5) : '-',
            ZHS6: typeof item.tension6 === 'number' ? Math.round(item.tension6) : '-',
            SpeedS5: typeof item.speed5 === 'number' ? Math.round(item.speed5) : '-',
            SpeedS4: typeof item.speed4 === 'number' ? Math.round(item.speed4) : '-',
            SpeedS3: typeof item.speed3 === 'number' ? Math.round(item.speed3) : '-',
            SpeedS2: typeof item.speed2 === 'number' ? Math.round(item.speed2) : '-',
            SpeedS1: typeof item.speed1 === 'number' ? Math.round(item.speed1) : '-',
            ThickS5: item.thk5 !== undefined ? Number(item.thk5).toFixed(3) : '-',
            ThickS4: item.thk4 !== undefined ? Number(item.thk4).toFixed(3) : '-',
            ThickS3: item.thk3 !== undefined ? Number(item.thk3).toFixed(3) : '-',
            ThickS2: item.thk2 !== undefined ? Number(item.thk2).toFixed(3) : '-',
            ThickS1: item.thk1 !== undefined ? Number(item.thk1).toFixed(3) : '-',
            PowerS5: typeof item.power5 === 'number' ? Math.round(item.power5) : '-',
            PowerS4: typeof item.power4 === 'number' ? Math.round(item.power4) : '-',
            PowerS3: typeof item.power3 === 'number' ? Math.round(item.power3) : '-',
            PowerS2: typeof item.power2 === 'number' ? Math.round(item.power2) : '-',
            PowerS1: typeof item.power1 === 'number' ? Math.round(item.power1) : '-',
            rollingForceSetS1: typeof item.rollingForceSet1 === 'number' ? Math.round(item.rollingForceSet1) : '-',
            rollingForceSetS2: typeof item.rollingForceSet2 === 'number' ? Math.round(item.rollingForceSet2) : '-',
            rollingForceSetS3: typeof item.rollingForceSet3 === 'number' ? Math.round(item.rollingForceSet3) : '-',
            rollingForceSetS4: typeof item.rollingForceSet4 === 'number' ? Math.round(item.rollingForceSet4) : '-',
            rollingForceSetS5: typeof item.rollingForceSet5 === 'number' ? Math.round(item.rollingForceSet5) : '-',
            wbendS1: item.wbend1 ?? '-',
            wbendS2: item.wbend2 ?? '-',
            wbendS3: item.wbend3 ?? '-',
            wbendS4: item.wbend4 ?? '-',
            wbendS5: item.wbend5 ?? '-',
            imbendS1: item.imbend1 ?? '-',
            imbendS2: item.imbend2 ?? '-',
            imbendS3: item.imbend3 ?? '-',
            imbendS4: item.imbend4 ?? '-',
            imbendS5: item.imbend5 ?? '-',
            zp1: item.zp1 ?? '-',
            zp2: item.zp2 ?? '-',
            zp3: item.zp3 ?? '-',
            zp4: item.zp4 ?? '-',
            ypIndex: item.ypIndex,
            widIndex: item.widIndex,
            thkIndex: item.thkIndex,
          }));
          pagination.total = responseData.count || responseData.data.length; // Use responseData.count for total
          ElMessage.success(responseData.msg || '查询成功');
        } else {
          ElMessage.info(responseData?.msg || (response as any)?.msg || '未查询到数据或响应格式不正确');
          tableData.value = [];
          pagination.total = 0;
        }
      } catch (error: any) {
        console.error('获取数据失败:', error);
        // Try to get error message from error.response.data.msg or error.data.msg
        const errorMessage = error.response?.data?.msg || error.data?.msg || error.msg || error.message || '获取数据失败';
        ElMessage.error(errorMessage);
        tableData.value = [];
        pagination.total = 0;
      }
    };

    // 查询方法
    const handleSearch = () => {
      pagination.currentPage = 1;
      fetchTableData();
    };

    // 重置方法
    const handleReset = () => {
      headerSearchForm.volumeNum = '';
      headerSearchForm.steelGrade = '';
      headerSearchForm.inletWidth = '';
      headerSearchForm.entryThickness = '';
      headerSearchForm.startDate = '';
      headerSearchForm.endDate = '';
      // (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
      //   headerSearchForm[key] = ''; // This would clear all, including non-string if any
      // });
      handleSearch();
    };

    // 导出方法
    const handleExport = () => {
      try {
        ElMessage.info('正在导出数据...');
        
        // 构建导出参数
        const exportParams: any = {
          volumeNum: headerSearchForm.volumeNum || '',
          steelGrade: headerSearchForm.steelGrade || '',
          inletWidth: headerSearchForm.inletWidth || '',
          entryThickness: headerSearchForm.entryThickness || '',
          startDate: headerSearchForm.startDate ? formatCustomDate(headerSearchForm.startDate) : '',
          endDate: headerSearchForm.endDate ? formatCustomDate(headerSearchForm.endDate) : '',
        };

        // 调用导出接口，getDownload 方法会自动处理文件下载
        rollingSimulationApi.exportAcidRollingProduct(exportParams);
        
        ElMessage.success('导出请求已发送，文件将自动下载');
      } catch (error: any) {
        console.error('导出失败:', error);
        const errorMessage = error.response?.data?.msg || error.data?.msg || error.msg || error.message || '导出失败';
        ElMessage.error(errorMessage);
      }
    };


    // 删除方法
    const handleDelete = (row: any) => {
      // 这里添加删除逻辑
      console.log('删除', row);
    };

    // 分页大小变化
    const handleSizeChange = (val: number) => {
      pagination.pageSize = val;
      fetchTableData();
    };

    // 页码变化
    const handleCurrentChange = (val: number) => {
      pagination.currentPage = val;
      fetchTableData();
    };

    // 生命周期钩子
    onMounted(() => {
      fetchTableData(); // 组件挂载时获取初始数据
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    })

    return {
      headerSearchForm,
      tableData,
      pagination,
      handleSearch,
      handleReset,
      handleExport,
      handleCheck,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      dataSourceTypeOptions,
      dataSourceType,
      dialogVisible,
      detailData,
      form,
      rollingProcedureTable,
      simulationResultOutTable,
      option,
      option1,
      option2,
      option3,
      widthRangeOptions,
      thicknessRangeOptions
      ,bandCellClassName
    };
  },
});
</script>
<style scoped lang="less">
.msg-title {
  top: -4vh;
  left: 39.5vw;
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2vh;
  font-weight: bolder;
  width: 10vw;
}

:deep(.aprd-search-form .el-input--small .el-input__inner),
:deep(.aprd-search-form .el-select--small .el-select__input-wrapper input),
:deep(.aprd-search-form .el-date-editor--small .el-range-input),
:deep(.aprd-search-form .el-date-editor--small .el-range-separator) {
  font-size: 12px !important;
}

:deep(.aprd-search-form .el-select--small) {
  width: 150px;
}

:deep(.aprd-search-form .el-form-item__label) {
  font-size: 12px;
  line-height: 28px;
  color: #606266;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 3px;
}



:deep(.el-table) {
  font-size: 12px;
}

:deep(.el-table .cell) {
  line-height: 14px
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 纵向分组底色：从“轧制力(kN)”一级起，隔一组标浅色 */
::v-deep(.band-blue) { background-color: #f3f8ff !important; }

::v-deep .el-table .el-table__cell {
  padding-top: 4px !important;
}
</style>
